<template>
    <!-- <el-button type="success" @click="WareMaterAddData">添加</el-button> -->

    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />

        <el-table-column prop="materialName" label="名称" width="90" />
        <el-table-column prop="mateialCode" label="编号" width="90" />
        <el-table-column prop="mateialType" label="材料" width="80" />
        <el-table-column prop="mateialSource" label="材料来源" width="100" />
        <el-table-column prop="mateialThrough" label="是否通过" width="100" />
        <el-table-column prop="mateialSum" label="数量" width="90" />
        <el-table-column prop="mateialUnit" label="单位" width="60" />
        <el-table-column prop="addProp" label="添加人" width="100" />
        <el-table-column prop="addTime" label="添加时间" width="200">
            <template #default="script">
                {{ moment(script.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updTime" label="修改时间" width="200">
            <template #default="script">
                {{ moment(script.row.updTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="">
                    Detail
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog v-model="WareMaterAddVies" title="添加材料库" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">

            <el-form-item label="名称" prop="materialName">
                <el-input v-model="ruleForm.materialName" />
            </el-form-item>

            <el-form-item label="材料" prop="mateialType">
                <el-input v-model="ruleForm.mateialType" />
            </el-form-item>

            <el-form-item label="材料来源" prop="mateialSource">
                <el-input v-model="ruleForm.mateialSource" />
            </el-form-item>

            <el-form-item label="数量" prop="mateialSum">
                <el-input v-model="ruleForm.mateialSum" />
            </el-form-item>

            <el-form-item label="位置" prop="mateialAddress">
                <el-select v-model="ruleForm.mateialAddress">
                    <el-option v-for="item in WareList" :key="item.id"
                        :label="item.storageCode + '/' + item.storageName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="单位" prop="mateialUnit">
                <el-select v-model="ruleForm.mateialUnit">
                    <el-option label="毫米" value="毫米" />
                    <el-option label="厘米" value="厘米" />
                    <el-option label="米" value="米" />
                    <el-option label="克" value="克" />
                    <el-option label="千克" value="千克" />
                    <el-option label="个" value="个" />
                    <el-option label="次数" value="次数" />
                    <el-option label="小时" value="小时" />
                    <el-option label="摄氏度" value="摄氏度" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize" :page-sizes="[3, 5, 7, 9]"
        layout="total, sizes, prev, pager, next, jumper" :total="Page.TotalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import Mesaxios from '../../Http/MesHelp'
import { ElSpace } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { fa } from 'element-plus/es/locales.mjs';
import moment from 'moment';

const User = reactive({
    Name: localStorage.getItem("userNickname") || ''
})
// 显示 查询 分页
const tableData = ref([])
const Page = reactive({
    PageIndex: 1,
    PageSize: 10,
    TotalCount: 0,
    TotalPage: 0
})


const WareMaterialShow = () => {
    Mesaxios.get("/api/Storehouse/WareMaterialShow", {
        params: {
            PageIndex: Page.PageIndex,
            PageSize: Page.PageSize
        }
    }).then(res => {
        tableData.value = res.data.data.list
        Page.TotalCount = res.data.data.count
        Page.TotalPage = res.data.data.page
        console.log(tableData.value)
    })
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    Page.PageSize = val
    WareMaterialShow()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    Page.PageIndex = val
    WareMaterialShow()
}


// 添加
const WareMaterAddVies = ref(false)
const WareMaterAddData = () => {
    //alert("asdasdasdasdsadsadasdasdasdasdasd")
    WareMaterAddVies.value = true
}

interface RuleForm {
    materialName: string
    mateialType: string
    mateialSource: string
    mateialAddress: any
    mateialSum: any
    mateialUnit: string
    addProp: any
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    materialName: '',
    mateialType: '',
    mateialSource: '',
    mateialAddress: '',
    mateialSum: '',
    mateialUnit: '',
    addProp: User.Name
})

//储位信息列表显示
interface WareItem {
    id: number
    storageCode: string
    storageName: string
}

const WareList = ref<WareItem[]>([])
const WareMaterGet = () => {
    Mesaxios.get("/api/Storehouse/WareMaterGet").then(res => {
        WareList.value = res.data.data
        console.log(WareList.value);
    })
}

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    materialName: [
        { required: true, message: '名称不能为空', trigger: 'blur' },
    ],
    mateialType: [
        { required: true, message: '材料不能为空', trigger: 'blur' },
    ],
    mateialSource: [
        { required: true, message: '材料来源不能为空', trigger: 'blur' },
    ],
    mateialAddress: [
        { required: true, message: '请选择位置', trigger: 'blur' },
    ],
    mateialSum: [
        { required: true, message: '数量不能为空', trigger: 'blur' },
    ],
    mateialUnit: [
        { required: true, message: '单位不能为空', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')

            Mesaxios.post("/api/Storehouse/WareMaterialAdd", ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("添加材料库成功")
                    WareMaterAddVies.value = false
                    WareMaterialShow()
                }
                else {
                    ElMessage.error("添加材料库失败")
                    WareMaterAddVies.value = false
                    WareMaterialShow()
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))


onMounted(() => {
    WareMaterialShow()//显示
    WareMaterGet()
})

</script>